<template>
    <div class="refund">
        <van-nav-bar title="退款详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-steps :active="active" style="background-color: #f5f4f4;">
            <van-step>创建成功</van-step>
            <van-step>售后审核</van-step>
            <van-step>完成</van-step>
        </van-steps>
        <div class="top">
            <van-steps direction="vertical" :active="active" active-color="black" center>
                <van-step v-if="active==0">
                    <h4>申请成功</h4>
                    <div class="size">
                        <p>申请已提交</p>
                        <p>2016-07-12 12:40</p>
                    </div>
                </van-step>
                <van-step v-if="active==1">
                    <h4>售后审核</h4>
                    <p class="size">2016-07-11 10:00</p>
                </van-step>
                <van-step v-else-if="active==2">
                    <h4>完成</h4>
                    <div class="size">
                        <p>退款成功</p>
                        <p>2016-07-10 09:30</p>
                    </div>
                </van-step>
            </van-steps>
        </div>
        <div class="button">
            <h4 class="button-title">售后信息</h4>
            <div class="button_right">
                <img src="https://paimgcdn.baidu.com/6AC2C75232EC71B1?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F7716380955.jpg&rz=urar_2_968_600&v=0"
                    alt="">
                <div class="btn_right_rig">
                    <p>苹果AirPods Pro</p>
                    <p>￥888</p>
                </div>
            </div>
            <div class="button_btn">
                <div class="size">
                    <ul>
                        <li>服务类型</li>
                        <li>申请原因</li>
                        <li>申请时间</li>
                        <li>订单号码</li>
                    </ul>
                </div>
                <div style="font-size: 10px;">
                    <ul>
                        <li>退款</li>
                        <li>不想要了</li>
                        <li>2022-09-19</li>
                        <li>123456789</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="base">
            <van-button round>取消退款</van-button>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            active: 1,
        }
    },
    mounted() {
        this.active = this.$route.query.active
        this.query()
    },
    methods: {
        query() {
            setTimeout(() => {
                this.active++
                console.log(this.active);
            }, 2000);
        },
        onClickLeft(){
            this.$router.push({ name: "myallorders", query: { active: 4 } })
        }
    }
}
</script>
<style scoped>
.refund {
    background-color: #f5f4f4;
    width: 100%;
    height: 100%;
}

.top {
    width: 93%;
}

.van-steps--vertical {

    border-radius: 1rem;
    margin-left: 1.8rem;
}

.button {
    width: 86%;
    margin: 0.5rem 0 0 1.8rem;
    border-radius: 1rem;
    background-color: #fff;
}

img {
    width: 7rem;
}

.button_right {
    margin-top: 1rem;
    display: flex;
}

.btn_right_rig {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.button-title {
    margin: 1rem;
}

.button_btn {
    display: flex;
    justify-content: space-between;
}

ul {
    margin: 1rem;
}

li {
    margin: 0.2rem;
    line-height: normal;
}

.size {
    font-size: 10px;
    color: #989898;
}

.base {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.van-button {
    margin-left: 70%;
}
</style>
